<template>
    <div>
        <div class="student-item1">
            <div class="user1">
                <div class="name">
                    <p class="nickname">{{ JSON.parse(this.$route.query.data).kcname }}签到记录</p>
                </div>
                <div>
                    <p class="phone">
                        <van-icon name="arrow-left" style="line-height: inherit;margin: 5px;" />
                        <span @click="show=true">{{ time }}</span>
                        <van-icon name="arrow" style="line-height: inherit;margin: 5px;" />
                    </p>
                </div>
            </div>
        </div>
        <van-popup v-model="show" position="bottom">
            <van-datetime-picker v-model="currentDate" type="date" @cancel="show = false" @confirm="show = false"
                @change="endTimeChange" />
        </van-popup>
        <div class="student-item" v-for="(item, index) in student" :key="index">
            <div class="avatar"><img :src="item.head_sculpture" alt="" width="100%"></div>
            <div class="user">
                <div class="name">
                    <p class="nickname">{{ item.name }}</p>
                    <p class="phone">{{ item.phone }}</p>
                </div>
                <div class="statu">{{ item.status }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import api from '@/api'
export default {
  name: 'student-edit',
  data () {
    return {
      show: false,
      currentDate: new Date(),
      name: '古筝课',
      time: '',
      student: [],
      ktime: '',
      jtime: ''
    }
  },
  mounted () {
    this.getTime()
    this.Details()
  },
  methods: {
    // 课程签到详细 agencyCurriculumCollectiveDetails
    Details () {
      let params = {
        id: JSON.parse(this.$route.query.data).id,
        ktime: this.ktime,
        jtime: this.jtime
      }
      api.agencyCurriculumCollectiveDetails({
        params,
        callback: res => {
          console.log(res)
          this.student = res.data.data
          this.student.forEach(v => {
            if (v.status === 1) {
              v.status = '已签到'
            } else if (v.status === 2) {
              v.status = '请假'
            } else if (v.status === null) {
              v.status = '未签到'
            } else {
              v.status = ''
            }
          })
        }
      })
    },
    // 初始化时间
    getTime () {
      let date = new Date()
      let Y = date.getFullYear() + '-'
      let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-'
      let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
      this.time = Y + M + D
      this.ktime = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()
      this.ktime = (this.ktime) / 1000
      this.jtime = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1).getTime()
      this.jtime = Number((this.jtime) / 1000) - Number(1)
    },

    endTimeChange (e) {
      let endTimeArr = e.getValues()
      this.time = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`
      this.ktime = new Date(`${endTimeArr[0]}`, Number(`${endTimeArr[1]}`) - Number(1), `${endTimeArr[2]}`).getTime()
      this.ktime = (this.ktime) / 1000
      this.jtime = new Date(`${endTimeArr[0]}`, Number(`${endTimeArr[1]}`) - Number(1), Number(`${endTimeArr[2]}`) + Number(1)).getTime()
      this.jtime = Number((this.jtime) / 1000) - Number(1)
      this.Details()
    },
    showPopup () {
      this.show = true
    }
  }
}
</script>

<style scoped>
    .student-item1 {
        height: 70px;
        display: flex;
        padding: 0 0 0 15px;
        align-items: center;
        border-bottom: 1px solid #999;
        box-shadow: 0 0 3px #999;
    }

    .student-item1 .user1 {
        flex-shrink: 1;
        flex-grow: 1;
        padding: 12px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .student-item {
        height: 70px;
        display: flex;
        padding: 0 0 0 15px;
        align-items: center;
    }

    .student-item .user {
        flex-shrink: 1;
        flex-grow: 1;
        padding: 12px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1px solid #999;
    }

    .student-item .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        flex-grow: 0;
        margin-right: 20px;
    }

    p {
        margin: 5px;
    }

    .nickname {
        color: #1A1D20;
    }

    .phone {
        color: #666666;
    }

    .statu {
        margin-top: 10px;
    }
</style>
